<template>
  <div>
     <nav-bar>
       <div slot="title">注册</div>
     </nav-bar>
    <div class="login">
      <div class="all">
        <img src="~assets/img/m5.png" class="welcome" />
          <div class="user"></div>
          <input v-model="username" name="username" type="text" class="userinput" size="34" placeholder="输入昵称">
          <div class="password"></div>
          <input v-model="password" name="password" type="password" class="userinput" size="34" placeholder="输入密码">
          <div class="password"></div>
          <input v-model="password2" name="password2" type="password" class="userinput" size="34" placeholder="确认密码">
          <div class="user"></div>
          <input v-model="tel" name="tel" type="tel" class="userinput" size="34" placeholder="输入电话">
          <div class="user"></div>
          <input v-model="email" name="email" type="email" class="userinput" size="34" placeholder="输入邮箱">
          <div class="user"></div>
          <input v-model="address" name="address" type="text" class="userinput" size="34" placeholder="输入住址">
          <input  type="button" value="注册" onclick="" class="register" @click="enter">
      </div>
    </div>
  </div>
</template>

<script>
  import {register} from 'network/profile/user.js'
  import navBar from 'components/content/nav/navBar.vue'

  export default{
    name:'',
    data(){
      return {
        username:"",
        tel:"",
        email:"",
        password:"",
        password2:"",
        address:"",
        userInfo:{}
      }
    },
    computed:{

    },
    methods:{
      test(){
        this.$store.dispatch('initUser',userInfo).then(res=>console.log(res))
        this.$router.push("/login")
      },
      baseCheck(){
        if(this.address.trim().length==0){
          alert("地址不能为空")
          return false
        }
        if(this.password2!=this.password){
          alert("密码不一致")
          return false
        }
        if(!/^[\u4E00-\u9FA5a-zA-Z0-9_-]{1,9}$/.test(this.username)){
          alert("昵称应为1-9位英文、数字、中文、下划线或减号")
          return false
        }
        if(!/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(this.tel)){
          alert("电话号码不符合格式")
          return false
        }
        if(!/^\w{5,}@[a-z0-9]{2,3}\.[a-z]+$|\,$/.test(this.email)){
          alert("邮箱不符合格式")
          return false
        }
        if(!/^.*(?=.{6,})(?=.*\d)(?=.*[a-zA-Z]).*$/.test(this.password)){
          alert("密码应为6位以上，至少包括数字和字母")
          return false
        }
        return true
      },
      enter(){
        console.log('enter');
        if(!this.baseCheck()){
          return false
        }
        this.userInfo={
          username:this.username,
          password:this.password,
          tel:this.tel,
          email:this.email,
          address:this.address
        }
        console.log(this.userInfo);
        register(this.userInfo).then(res=>{
          console.log(res);
          if(res.data.result=="yes")
            this.$router.push("/login")
          else if(res.data.result=="tel no")
            alert("电话号已被占用")
          else if(res.data.result=="mail no")
            alert("邮箱已被占用")
          else alert("未知错误")
        }).catch(e=>{
          console.log(e);
        })
      }
    },
    created() {
      let info={name:"a"}
      // console.log(window.localStorage.setItem("test",JSON.stringify(info)));
       // window.addEventListener('beforeunload', () => {
       //      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
       // })
      // console.log(this.$store);
    },

    components:{
      navBar
    }
  }
</script>

<style scoped>
  .login{
  	background:linear-gradient(to bottom,#ffd386,#ec73d6);
  	height: calc(100vh - 43px - 49px);
  	top: 0;
  	left: 0;
  	background-repeat: no-repeat;
    position: relative;
  }
  .all{
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%,-50%);
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-end;
    width: 85%;
  }
  .welcome{
  	width: 100px;
  	height: 100px;
  	margin: 0 auto;
    margin-top: 40px;
  }
  .form{
  	height: 100%;
  	width: 100%;
  }
  .user{

  	width:10%;
  	height:10%;
  }
  .userinput{
  	font-size: 20px;
  	width: 80%;
  	height: 20%;
  	border-top: none;
  	border-left: none;
  	border-right: none;
  	background: none;
  	display: block;
  	margin: 0 auto;
  	margin-top: 5%;
  }
  .password{

  	width: 10%;
  	height:10%;
  }

  .register{
  	width: 90%;
  	height: 10%;
  	background: rgb(235, 34, 81);
  	color: white;
  	text-align: center;
  	font-size: 20px;
  	font-family: 黑体;
  	border: none;
  	border-radius:25px;       /*记得*/
  	display: block;
  	margin: 0 auto;
  	margin-top: 10%;
    margin-bottom: 25%;
  	padding: 10px 0px;
  	box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
  }
  .bottom{
  	display: flex;
  }
  .remeber{
  	display: flex;
  	justify-content: space-between;
  	flex-direction: row;
  	padding: 0 10px;
  	height: 7vh;
  }
  .auto{
  	margin-top: 20px;
  	font-size: 15px;
  }
  input[type=checkbox]{
  	width: 15px;
  	height: 15px;
  	border-radius: 50%;
  }
  ::placeholder{
  	color: rgba(255, 255, 255, 0.4);
  }
  a{
  	text-decoration: none;
  }
</style>
